<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<head>
  <title>堆积柱状图</title>
  <link class="codestyle" rel="prefetch alternate stylesheet" href="${ctx}/assets/admin/LingUI/highlight/styles/tomorrow.css"/>
</head>

<div class="row">
  <div class="col-xs-12">
    <div id="dj_bar_div" class="col-lg-12" style="height: 400px"></div>
  </div>
  <div class="col-xs-12">
    <pre><code class="java">
      @RequestMapping(value = "/bar/dj",method = RequestMethod.POST)
      @ResponseBody
      public ModelMap gendjBarChart(){

        ModelMap modelMap = new ModelMap();

        Option option = new Option();
        option.title().text("堆积柱状图例子");
        option.tooltip().trigger(Trigger.axis);
        option.legend("直接访问","邮件营销","联盟广告","视频广告","搜索引擎","百度","谷歌","必应","其他");
        option.toolbox().show(true).feature(Tool.mark, Tool.dataView,
        new MagicType(Magic.line, Magic.bar,Magic.stack,Magic.tiled).show(true),
        Tool.restore,
        Tool.saveAsImage).orient(Orient.vertical).x(X.right).y(Y.center);

        option.calculable(true);

        option.xAxis(new CategoryAxis().data("周一","周二","周三","周四","周五","周六","周日"));
        option.yAxis(new ValueAxis().type(AxisType.value));

        Bar bar = new Bar("直接访问");
        bar.data(320, 332, 301, 334, 390, 330, 320);

        Bar bar2 = new Bar("邮件营销");
        bar2.data(120, 132, 101, 134, 90, 230, 210);

        Bar bar3 = new Bar("联盟广告");
        bar3.data(220, 182, 191, 234, 290, 330, 310);

        Bar bar4 = new Bar("视频广告");
        bar4.data(150, 232, 201, 154, 190, 330, 410);

        Bar bar5 = new Bar("搜索引擎");
        bar5.data(862, 1018, 964, 1026, 1679, 1600, 1570);
        bar5.markLine().itemStyle().normal().lineStyle().type(LineType.dashed);
        List<PointData> pointDatas = new ArrayList<PointData>();
        pointDatas.add(new PointData().type(MarkType.min).name("最小值"));
        pointDatas.add(new PointData().type(MarkType.max).name("最大值"));
        bar5.markLine().data(pointDatas);

        Bar bar6 = new Bar("百度");
        bar6.setBarWidth(5);
        bar6.data(620, 732, 701, 734, 1090, 1130, 1120);

        Bar bar7 = new Bar("谷歌");
        bar7.data(120, 132, 101, 134, 290, 230, 220);

        Bar bar8 = new Bar("必应");
        bar8.data(60, 72, 71, 74, 190, 130, 110);

        Bar bar9 = new Bar("必应");
        bar9.data(62, 82, 91, 84, 109, 110, 120);

        option.series(bar, bar2, bar3, bar4, bar5,bar6,bar7,bar8,bar9);

        modelMap.addAttribute(Constants.DEFAULT_SUCCESS_KEY,Boolean.TRUE);
        modelMap.addAttribute("data", GsonUtil.format(option));

        return modelMap;
      }
    </code></pre>
  </div>
</div>
<script type="text/javascript">
  var scripts = [null,
    "${ctx}/assets/admin/LingUI/echarts/echarts-all.js",
    "${ctx}/assets/admin/LingUI/highlight/highlight.pack.js",
    null];

  ace.load_ajax_scripts(scripts, function() {

    hljs.initHighlightingOnLoad();

    $(document).ready(function() {
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });

    var chart = echarts.init(document.getElementById('dj_bar_div'));
    chart.clear();
    chart.showLoading({text: '正在努力的读取数据中...'});

    $.ajax({
      type : 'POST',
      url : '${ctx}/${frameworkPath}/charts/bar/dj',
      traditional : true,
      dataType:'json',
      success : function(message) {
        debugger;
        if(message.success){
          chart.setOption(JSON.parse(message.data));
          chart.hideLoading();
        }
        else{
          lui.fail('error');
        }
      }
    });
  });
</script>